<template>
  <div class="anli">
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed />
    <div class="f1" v-for="v in video" :key="v.id">
      <video :src="v.src" width="100%" controls></video>
      <p>{{ v.title }}</p>
      <div>
        <span>{{ v.name }}</span>
        <van-icon name="star-o">{{ v.sc }}</van-icon>
        <van-icon name="share-o">{{ v.share }}</van-icon>
      </div>
    </div>
    <go-top></go-top>
  </div>
</template>

<script>
import GoTop from "@/components/GoTop.vue";
export default {
  components: { GoTop },
  data() {
    return {
      video: [
        {
          id: 1,
          src: "https://qnvideo.hunliji.com/lqxCthaMzSZO70H_wFqzkgqtiRi1",
          title: "爱丽丝梦游仙境梦幻主题婚礼，带你走进童话世界",
          name: "珂珂婚礼艺术",
          sc: "53",
          share: "12",
        },
        {
          id: 2,
          src: "https://qnvideo.hunliji.com/lqoSYaAdBxN22lNHtoZ8J_FFYId3",
          title: "小清新白绿色户外婚礼，小预算搞定~",
          name: "馨爱婚礼定制",
          sc: "45",
          share: "6",
        },
        {
          id: 3,
          src: "https://qnvideo.hunliji.com/lg6Mjul7fYjGwv5N6pyYQJ73hDzo",
          title: "椰林沙滩碧海蓝天，草坪婚礼清新明朗",
          name: "三亚简爱派婚礼",
          sc: "35",
          share: "5",
        },
        {
          id: 4,
          src: "https://qnvideo.hunliji.com/liPZyI3w4IfeCjvSKplHwpQ0vNuB",
          title: "油画户外花园，超甜的春日婚礼",
          name: "大成唯爱婚礼",
          sc: "31",
          share: "1",
        },
        {
          id: 5,
          src: "https://qnvideo.hunliji.com/lpxlYrv3Jgl2seeJ7ZiUFwTD67ZG",
          title: "白绿色韩式婚礼分享，高级感满满！",
          name: "盛晴宴会婚礼策划",
          sc: "38",
          share: "5",
        },
        {
          id: 6,
          src: "https://qnvideo.hunliji.com/llFPtW_FNlpS1F3Bpu99FLhfBfEc",
          title: "OMG！爱丽丝梦游仙境的现场也太棒了吧",
          name: "妃曼婚礼中心（步行街总店）",
          sc: "36",
          share: "3",
        },
        {
          id: 7,
          src: "https://qnvideo.hunliji.com/lgXcFaFVwRT5PhRhXw0CZoP7rINE",
          title: "火爆朋友圈的蓝白色星空婚礼，你喜欢吗？",
          name: "予尔婚礼",
          sc: "68",
          share: "17",
        },
        {
          id: 8,
          src: "https://qnvideo.hunliji.com/llaptmjzECt1_r0sQwJ4Vm2niQrQ",
          title: "3W颗水晶的视觉盛宴，美到哭！",
          name: "米迪婚礼",
          sc: "35",
          share: "3",
        },
        {
          id: 9,
          src: "https://qnvideo.hunliji.com/lpgnyg_jUy7NlaZdCApEw_n_zXKL",
          title: "中式喜庆大红色婚礼，长辈们的最爱",
          name: "深圳天美婚礼策划",
          sc: "46",
          share: "5",
        },
        {
          id: 10,
          src: "https://qnvideo.hunliji.com/ln9n6gGyfCFbneplvlO77LcptxDl",
          title: "沉浸式白绿色高级婚礼，这样的韩式小清新你喜欢吗？",
          name: "百思特婚礼",
          sc: "41",
          share: "4",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.anli {
  background-color: #f8f8f8;
  .van-nav-bar {
    background-color: transparent;
    .van-icon {
      color: #fff;
    }
  }
  .van-hairline--bottom::after {
    border: 0;
  }
  .f1 {
    background-color: #fff;
    margin-bottom: 10px;
    p {
      padding: 0 10px;
      font-size: 13px;
      font-weight: 600;
      font-family: "微软雅黑";
      width: 80%;
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*禁止换行*/
      text-overflow: ellipsis; /*省略号*/
    }
    div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      span {
        flex: 1;
        font-size: 12px;
      }
      .van-icon {
        color: gray;
        font-size: 12px;
      }
      .van-icon-star-o {
        margin-right: 20px;
      }
    }
  }
}
</style>